<template>
	<view>
		<image class="image" src="../../static/order/pack_banner.jpg" mode="aspectFill"></image>
	</view>
	<view class="content">
		<view class="left">
			<view :class="button==item.Id?'isselect':''" class="left_button" v-for="item in left_select" :key="item.Id"
				@click="button=item.Id">
				<view class="is_left"></view>
				<text>{{item.Text}}</text>
			</view>
		</view>
		<view class="right">
			<scroll-view scroll-y="true" style="height: 100%;" :show-scrollbar="false">
				<view class="right_view" v-for="item in left_select[button - 1].Details" :key="item.Isid">
					<navigator :url="'/pages/confirm_order/confirm_order?id=' + button + '&isid=' + item.Isid">
						<image class="right_image" :src="item.Url" mode="aspectFill"></image>
					</navigator>
				</view>
				<view style="height: 150px;">
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const button = ref('1')
	const left_select = ref([{
			Id: '1',
			Text: '热销榜',
			Details: [{
				Isid: '1',
				Url: '../../static/order/Hot_selling_list/1.jpg',
				Text: '月享300G/买一年送3个月',
				Monthly_average: '30.60',
				Prompt: '★热销榜：买1年送3个月,共计15个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
				Order_price: '459.00'
			}, {
				Isid: '2',
				Url: '../../static/order/Hot_selling_list/2.jpg',
				Text: '月享1500G/一年有效',
				Monthly_average: '33.25',
				Prompt: '★热销榜：1年有效,共计12个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
				Order_price: '399.00'
			}, {
				Isid: '3',
				Url: '../../static/order/Hot_selling_list/3.jpg',
				Text: '月享100G/买一年送1个月',
				Monthly_average: '19.92',
				Prompt: '★热销榜：买1年送1个月,共计13个月.充值按天计算每30天为一个月包含100G全国通用流量。',
				Order_price: '259.00'
			}, {
				Isid: '4',
				Url: '../../static/order/Hot_selling_list/4.jpg',
				Text: '月享60G/一年有效',
				Monthly_average: '16.58',
				Prompt: '★热销榜：1年有效,共计12个月.充值按天计算每30天为一个月包含60G全国通用流量。',
				Order_price: '199.00'
			}, {
				Isid: '5',
				Url: '../../static/order/Hot_selling_list/5.jpg',
				Text: '月享230G/6个月有效',
				Monthly_average: '24.83',
				Prompt: '★热销榜：半年有效,共计6个月.充值按天计算每30天为一个月包含230G全国通用流量。',
				Order_price: '149.00'
			}, {
				Isid: '6',
				Url: '../../static/order/Hot_selling_list/6.jpg',
				Text: '月享350G/3个月有效',
				Monthly_average: '33.00',
				Prompt: '★热销榜：共计3个月.充值按天计算每30天为一个月包含350G全国通用流量。',
				Order_price: '99.00'
			}, {
				Isid: '7',
				Url: '../../static/order/Hot_selling_list/7.jpg',
				Text: '月享3000G/30天有效',
				Monthly_average: '69.00',
				Prompt: '★热销榜：30天有效，包含3000G全国通用流量。',
				Order_price: '69.00'
			}, {
				Isid: '8',
				Url: '../../static/order/Hot_selling_list/8.jpg',
				Text: '月享100G/30天有效',
				Monthly_average: '39.00',
				Prompt: '★热销榜：30天有效，包含100G全国通用流量。',
				Order_price: '39.00'
			}, {
				Isid: '9',
				Url: '../../static/order/Hot_selling_list/9.jpg',
				Text: '月享30G/30天有效',
				Monthly_average: '19.00',
				Prompt: '★热销榜：30天有效，包含30G全国通用流量。',
				Order_price: '19.00'
			}]
		},
		{
			Id: '2',
			Text: '视频/游戏',
			Details: [{
				Isid: '1',
				Url: '../../static/order/Video_games/1.jpg',
				Text: '月享1500G/买4年送1年',
				Monthly_average: '13.82',
				Prompt: '★极速流量：买4年送1年,共计60个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
				Order_price: '829.00'
			}, {
				Isid: '2',
				Url: '../../static/order/Video_games/2.jpg',
				Text: '月享1500G/买2年送6个',
				Monthly_average: '19.97',
				Prompt: '★极速流量：买2年送6个月,共计30个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
				Order_price: '599.00'
			}, {
				Isid: '3',
				Url: '../../static/order/Video_games/3.jpg',
				Text: '月享1500G/1年有效',
				Monthly_average: '33.25',
				Prompt: '★极速流量：1年有效,共计12个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
				Order_price: '399.00'
			}, {
				Isid: '4',
				Url: '../../static/order/Video_games/4.jpg',
				Text: '月享1500G/6个月有效',
				Monthly_average: '39.83',
				Prompt: '★极速流量：半年有效,共计6个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
				Order_price: '239.00'
			}, {
				Isid: '5',
				Url: '../../static/order/Video_games/5.jpg',
				Text: '月享1500G/30天有效',
				Monthly_average: '59.00',
				Prompt: '★极速流量：30天有效,强烈推荐购买年包套餐(立省309元！！！)',
				Order_price: '59.00'
			}, {
				Isid: '6',
				Url: '../../static/order/Video_games/6.jpg',
				Text: '月享350G/1年有效',
				Monthly_average: '24.92',
				Prompt: '★极速流量：1年有效,共计12个月.充值按天计算每30天为一个月包含350G全国通用流量。',
				Order_price: '299.00'
			}, {
				Isid: '7',
				Url: '../../static/order/Video_games/7.jpg',
				Text: '月享350G/6个月有效',
				Monthly_average: '28.17',
				Prompt: '★极速流量：共计6个月.充值按天计算每30天为一个月包含350G全国通用流量。',
				Order_price: '169.00'
			}, {
				Isid: '8',
				Url: '../../static/order/Video_games/8.jpg',
				Text: '月享350G/3个月有效',
				Monthly_average: '33.00',
				Prompt: '★极速流量：共计3个月.充值按天计算每30天为一个月包含350G全国通用流量。',
				Order_price: '99.00'
			}, {
				Isid: '9',
				Url: '../../static/order/Video_games/9.jpg',
				Text: '月享230G/买1年送1年',
				Monthly_average: '16.63',
				Prompt: '★极速流量：买1年送1年,共计24个月.充值按天计算每30天为一个月包含230G全国通用流量。',
				Order_price: '399.00'
			}, {
				Isid: '10',
				Url: '../../static/order/Video_games/10.jpg',
				Text: '月享230G/6个月有效',
				Monthly_average: '24.83',
				Prompt: '★极速流量：共计6个月.充值按天计算每30天为一个月包含230G全国通用流量。',
				Order_price: '149.00'
			}, {
				Isid: '11',
				Url: '../../static/order/Video_games/11.jpg',
				Text: '月享230G/3个月有效',
				Monthly_average: '29.67',
				Prompt: '★极速流量：共计3个月.充值按天计算每30天为一个月包含230G全国通用流量。',
				Order_price: '89.00'
			}, {
				Isid: '12',
				Url: '../../static/order/Video_games/12.jpg',
				Text: '月享230G/30天有效',
				Monthly_average: '49.00',
				Prompt: '★极速流量：30天有效,强烈推荐购买年包套餐(立省389元！！！)',
				Order_price: '49.00'
			}]
		},
		{
			Id: '3',
			Text: '居家办公',
			Details: [{
				Isid: '1',
				Url: '../../static/order/Home_work/1.jpg',
				Text: '月享3000G/买3年送1年',
				Monthly_average: '15.81',
				Prompt: '★超大流量：买3年送1年,共计48个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
				Order_price: '759.00'
			}, {
				Isid: '2',
				Url: '../../static/order/Home_work/2.jpg',
				Text: '月享3000G/买2年送6个月',
				Monthly_average: '23.30',
				Prompt: '★超大流量：买2年送6个月,共计30个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
				Order_price: '699.00'
			}, {
				Isid: '3',
				Url: '../../static/order/Home_work/3.jpg',
				Text: '月享3000G/买1年送3个月',
				Monthly_average: '30.60',
				Prompt: '★超大流量：买1年送3个月,共计15个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
				Order_price: '459.00'
			}, {
				Isid: '4',
				Url: '../../static/order/Home_work/4.jpg',
				Text: '月享3000G/买6个月送2个月',
				Monthly_average: '33.63',
				Prompt: '★超大流量：半年有效,共计6个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
				Order_price: '269.00'
			}, {
				Isid: '5',
				Url: '../../static/order/Home_work/5.jpg',
				Text: '月享3000G/买3个月送1个月',
				Monthly_average: '42.25',
				Prompt: '★超大流量：共计3个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
				Order_price: '169.00'
			}, {
				Isid: '6',
				Url: '../../static/order/Home_work/6.jpg',
				Text: '月享3000G/30天有效',
				Monthly_average: '69.00',
				Prompt: '★超大流量：30天有效，包含3000G全国通用流量,强烈推荐购买年包套餐(立省209元！！！)',
				Order_price: '69.00'
			}, {
				Isid: '7',
				Url: '../../static/order/Home_work/7.jpg',
				Text: '月享100G/30天有效',
				Monthly_average: '39.00',
				Prompt: '★尊享套餐：30天有效，包含100G全国通用流量。',
				Order_price: '39.00'
			}, {
				Isid: '8',
				Url: '../../static/order/Home_work/8.jpg',
				Text: '月享30G/30天有效',
				Monthly_average: '19.00',
				Prompt: '★尊享套餐：30天有效，包含30G全国通用流量。',
				Order_price: '19.00'
			}]
		},
		{
			Id: '4',
			Text: '加油包',
			Details: [{
				Isid: '1',
				Url: '../../static/order/Fuel_bag/1.jpg',
				Text: '69元包100G',
				Monthly_average: '69.00',
				Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
				Order_price: '69.00'
			}, {
				Isid: '2',
				Url: '../../static/order/Fuel_bag/2.jpg',
				Text: '49元包60G',
				Monthly_average: '49.00',
				Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
				Order_price: '49.00'
			}, {
				Isid: '3',
				Url: '../../static/order/Fuel_bag/3.jpg',
				Text: '29元包30G',
				Monthly_average: '29.00',
				Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
				Order_price: '29.00'
			}, {
				Isid: '4',
				Url: '../../static/order/Fuel_bag/4.jpg',
				Text: '19元包10G',
				Monthly_average: '19.00',
				Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
				Order_price: '19.00'
			}]
		}
	])
</script>

<style lang="scss" scoped>
	.image {
		padding: 0;
		margin: 0;
		width: 100vw;
		height: 45vw;
		display: block;
	}


	.content {
		width: 100vw;
		height: calc(100vh - 45vw);
		display: flex;

		.left {
			width: 25%;
			height: 100%;
			background-color: #F5F5F5;

			.left_button {
				width: 100%;
				height: 6vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.isselect {
				background-color: white;
				font-weight: bold;

				.is_left {
					position: absolute;
					left: 0;
					width: 4px;
					height: 20px;
					margin: 2px;
					background-color: rgb(29, 41, 214);
				}
			}
		}

		.right {
			width: 75%;
			height: 100%;
			background-color: #FAFAFA;

			.right_view {
				padding: 1%;
				margin-top: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				.right_image {
					width: 70vw;
					height: 26vw;
					border-radius: 10px;
					display: block;
				}
			}

		}
	}
</style>